<style lang="scss" scoped>
	@import '@/assets/css/variable';

	.balance{
		width: 100%;
		background-color: $bgw;
		min-height: 100%;
		font-size: 1.2rem;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		bottom: 0;
		background-color: $main-bgc-white;
		// .wp{
		// 	display: flex;
		// 	height: 50px;
		// 	align-items: center;
		// 	justify-content: space-around;
		// 	background-color: white;
		// 	color: $color3;
			.wpnoscrollbox{
				height: 184px;
				align-items: center;
				background-color: #335FFC;
				color: $color3;
				.line{
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					// img{
					// 	position: fixed;
					// 	top: 0;
					// 	left: 0;
					// 	width: 100%;
					// 	height: 13rem;
					// 	object-fit: cover;
					// }
					.box{
						color:white;
						z-index: 10;
						text-align: center;
						.number{
							font-size: 2rem;
							font-weight: bold;
						}
						.text{
							font-size: 1rem;
							margin-top: 1rem;
						}
					}
				}
				.timeBox{
					// display: flex;
					// flex-direction: column;
					align-items: center;
					justify-content: space-around;
					background-color: white;
					border: 1px solid #f4f4f4;
					.time{
						display: flex;
						// align-items: center;
						// justify-content: center;
						padding: 1.2rem 1.6rem;
						font-size: 1.4rem;
						color: $color2;
					}
				}
			}
			
			.list{
				background-color: $main-bgc-white;
				overflow-y: scroll;
				margin-top: 50px;
				width: 100%;
				box-sizing: border-box;
				.item{
					padding: 1.2rem;
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					border-bottom: 1px solid $border-c;
					.leftBox{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.text{
							font-size: 1.4rem;
						}
						.time{
							font-size: 1.2rem;
							color:$color3;
							margin-top: 0.8rem;
						}
					}
					.rightBox{
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-around;
						font-size: 1.7rem;
					}
				}
			}
		// }
	}
</style>
<template>
	<div class="balance">
		<!-- <img src="../../assets/img/top2.svg" class="top_bg"> -->
		<!-- <van-image
			class="top_bg"
		  width="100%"
		  fit="contain"
		  src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5ec59f1e-d7e4-40a5-91d6-605747ef2fcc/7cdd450d-b89f-419d-b46f-bac7fbe56c83.svg"
		/> -->
		<div class="wpnoscrollbox" ref="noScrollBox">
			<div class="line">
				<!-- <img src="../../assets/img/top2.svg" class="top_bg"> -->
				<div class="box">
					<div class="number">{{merchantItem.available_balance||0}}</div>
					<div class="text">当前余额</div>
					<div class="margT-l">
						<van-button style="width: 100px;" type="primary" size="mini" @click="reChargeBtn">充值</van-button>
					</div>
					<div class="margT-l">
						{{merchantItem.name}}
					</div>
					<div class="margT-l">
						授信额度 {{merchantItem.credit_line}}￥
					</div>
					<div class="margT-l">
						可用授信额度 {{merchantItem.acredit_line}}￥
					</div>
				</div>
			</div>
			<van-dropdown-menu>
				<van-dropdown-item :title="selectTimeTitle" ref="item">
					<van-datetime-picker v-model="currentDate" type="year-month" title="选择年月" :min-date="minDate"
						:max-date="maxDate" :formatter="formatter" @confirm="confirm" @cancel="cancel" />
				</van-dropdown-item>
			</van-dropdown-menu>
		</div>
		<div class="list" ref="scrollBox" :style="{height:listBoxHeight+'px'}" v-if="list&&list.length>0">
			
			<van-list
				v-model="loading"
				:finished="finished"
				finished-text="已经到底了"
				@load="getBalancePage"
			>
				<div class="item" v-for="(item, index) in pageList" :key="index">
					<div class="leftBox">
						<div class="text">{{item.reason}}</div>
						<div class="time">{{item.createtime}}</div>
					</div>
					<div class="rightBox">
						{{item.balance}}
					</div>
				</div>
				<div v-if="list&&list.length==0" class="item color-s padding-all-m margT-ll">已经到底了</div>
			</van-list>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	// import ZixunList from '@/components/zixunList.vue'
	import moment from 'moment'
	import {
		myMixins
	} from "@/assets/js/mixins.js"
	export default {
		name: "jifen",
		mixins: [myMixins],
		components: {
			
		},
		data() {
			return {
				selectTimeTitle: '筛选时间',
				minDate: new Date(2021, 1, 1),
				maxDate: new Date(2035, 10, 1),
				currentDate: new Date(),
				selectedTime: '',
				showPop:false,
				loading: false,
				finished: false,
				pageNo: 1,
				pageSize: 10,
				list:[{
					name:'充值',
					createtime:'2021/01/12 12:12:12',
					value:'100',
					tag:'+'
				},{
					name:'订货',
					createtime:'2021/01/12 12:12:12',
					value:'60',
					tag:'-'
				}],
				totalPoint:'',
				totalIntegral:20000,
				merchantItem:'',
				pageList:[],
				listBoxHeight:0
			}
		},
		created() {
			const _this = this;
			// this.getCode()
		},
		mounted() {
			var screenHeight = document.body.clientHeight
			var noScrollBoxHeight = this.$refs.noScrollBox.offsetHeight + 50
			console.log("noScrollBoxHeight",noScrollBoxHeight)
			var listBoxHeight = screenHeight - noScrollBoxHeight - 50
			this.listBoxHeight = listBoxHeight
			console.log("listBoxHeight",this.listBoxHeight)
			this.getMerchantItem()
			this.getBalancePage()
		},
		methods: {
			reChargeBtn() {
				// this.$dialog.alert({
				// 	title: '温馨提示',
				// 	message: '此处调用微信充值API',
				// 	closeOnClickOverlay: true
				// }).then(res=>{
				// 	console.log("sure")
				// }).catch(res=>{
				// 	console.log("cancel")
				// })
				this.$router.push('recharge')
			},
			cancel() {
				this.$refs.item.toggle();
			},
			confirm(val) {
				this.selectTimeTitle = moment(val).format('YYYY-MM')
				console.log('this.selectTimeTitle',this.selectTimeTitle)
				this.$refs.item.toggle();
				this.selectedTime = this.selectTimeTitle
				this.pageNo = 1;
				this.pageList = []
				this.getBalancePage()
			},
			getBalancePage() {
				const _this = this
				const params = {
					merchant_id: localStorage.getItem('merchant_id'),
					pageNo:this.pageNo,
					pageSize:this.pageSize
				}
				if(this.selectedTime){
					params.createtime = this.selectedTime
				}
				this.loading = true
				this.$request.BalancePage(params).then(res=>{
				  if(res.ret==200){
				    const pageList = res.data.data
					this.pageList.push(...pageList)
					if(pageList.length==0){
						_this.finished = true;
					}else{
						_this.pageNo = _this.pageNo + 1;
					}
				  }
				}).finally(res=>{
					this.loading = false;
				})
			},
			getMerchantItem() {
				const params = {
					id: localStorage.getItem('merchant_id')
				}
				this.$request.MerchantItem(params).then(res=>{
				  if(res.ret==200){
				    this.merchantItem = res.data
				  }
				})
			},
			formatter(type, val) {
			  if (type === 'year') {
				return `${val}年`;
			  } else if (type === 'month') {
				return `${val}月`;
			  }
			  return val;
			},
		}
	};
</script>
